<template>
  <div>
    <h2>我是首页</h2>

    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/messages">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      path: "/home/news",
    };
  },
  created() {
    document.title = "首页"; // 修改页面标题
    console.log("Home组件被创建了，created");
  },
  destoryed() {
    console.log("Home组件被销毁了，destoryed");
  },
  mounted() {},
  updated() {},
  // activated和deactivated函数被执行的前提是，使用了keep-alive
  activated() {
    console.log('Home组件被激活了，activated');
    this.$router.push(this.path); // 当该组件被激活（前提是该组件在keep-alive标签内），导航至path
  },
  deactivated() {
    console.log('Home组件不处于激活状态了，deactivated');
  },
  // 组件内的守卫
  beforeRouteEnter(to, from, next) {
    // ...
    console.log("组件内的守卫：Home组件，beforeRouteEnter");
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // ...
    console.log("组件内的守卫：Home组件，beforeRouteUpdate");
    next();
  },
  beforeRouteLeave(to, from, next) {
    // ...
    console.log("组件内的守卫：Home组件，beforeRouteLeave");
    this.path = this.$route.path; // 在路由离开之前记录一下当前url的path
    next();
  },
};
</script>

<style>
</style>